<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./css/login.css" />
  <title>Document</title>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
</head>

<body>
  <div class="loginContainer" id="app">
    <h1>登录</h1>
    <form action="./checkUser.php" onsubmit="return false" method="post">姓名：
      <input v-model.lazy="username" class="inputStyle1 inputStyle username" type="text" name="username" />
      <span v-show="fn()" class="exchange">用户名不正确</span>
      <br />密码：
      <input v-model.lazy="pwd" class="inputStyle pwd" type="password" name="pwd" /><br />
      记住我 <input type="checkbox" class="remeber" />
      <input @click="submit" class="loginStyle" type="submit" value="登录" />
      <button @click="changeCart">点击我修改购物车数据</button>
    </form>
  </div>
</body>
<script>
  // console.log(axios);
   Vue.prototype.$http = axios;
  new  Vue({
    el:"#app",
    data:{
      username:"张三",
      pwd:"123",
    },
    methods:{
      fn(){
        if(this.username.length>0){
          return false;
        }else{
          return true;
        }
      },
      submit:async function(){
        let {data}=await this.$http({
          method:"post",
          url:"/getdata",
          data:{
            username:this.username,
            pwd:this.pwd
          }
        })
        let token =data.token
        localStorage.setItem("token",token);
      },
      async changeCart(){
        //修改商品的时候需要把token带到请求头里面判断你有没有权限
      let {data} = await this.$http.get("/getcart",{
        headers:{
          "Authorization":"Bearer "+localStorage.getItem("token")
          //Bearer后面必须有一个空格不然会报错
        }
      });
      }
    }
  })
</script>

</html>